<!--流程节点、流程处理小组件-->
<template>
  <div class="commonProcess">
    <!-- <div class="title">
      <h1>流程处理</h1>
    </div> -->
    <div class="topBtn" v-if="pageType === 'look' && (nowDataStatus && nowDataStatus.state === '正在审阅')">
      <a-button type="primary" class="editUser" @click="drafterBtn">以起草人身份操作</a-button>
    </div>
    <drafter-draw :nowDataStatus="nowDataStatus" :drafterVisible="drafterVisible" @drafterClose="drafterClose" @drafterConfirm="drafterConfirm"></drafter-draw>
    <div class="stepBox" v-if="stepBox && newStepArr.length > 0">
      <Step :nowDataStatus="nowDataStatus" :pageType='pageType' :stepArr="newStepArr" :isUser="isUser" v-if="stepArr.length>0"></Step>
      <a-empty v-else description="暂无流程视图" class="nodata" style="margin-bottom: 20px"/>
    </div>
    
    <process-table :tableData="tableArr" class="tableBox" v-if="processTableIsShow"></process-table>
    <bottom-describe
      ref="describeTask"
      v-if="bottomDescribeIsShow"
      :radioData="radioArr"
      :selectData="selectArr"
      :submitBtn="submitBtn"
      :textAreaValue="textAreaValue"
      @defaultRadio="defaultRadio"
      @radioChange="radioChange"
      @selectChange="selectChange"
      @modelValue="modelValue"
      @onCompleteWorkItem="onCompleteWorkItem"
      class="bottomBox"
    ></bottom-describe>
    
  </div>
</template>
<script>
import Step from "./stepComp";
import processTable from "./processTable";
import bottomDescribe from "./bottomFrom";
import drafterDraw from './drafterDraw.vue'
export default {
  name: "commonProcess",
  components: {
    Step,
    processTable,
    bottomDescribe,
    drafterDraw
  },
  props: {
    processTableIsShow: {
      type: Boolean,
      default: true
    },//流程记录表格是否显示
    bottomDescribeIsShow: {
      type: Boolean,
      default: true
    },//流程处理是否显示
    stepBox: {
      type: Boolean,
      default: true
    },
    stepArr: {
      type: Array,
      default: () => [
        {
          name: "提交",
          userFullName: "wcadmin",
          stateDisplay: "正在运行",
          oid: "",
          state: "OPEN_RUNNING",
          runningTime: "",
          order: "0",
          status: "finish"
        },
        {
          name: "审核",
          userFullName: "wyu",
          stateDisplay: "",
          oid: "OR:wt.workflow.definer.WfAssignedActivityTemplate:92319",
          state: "",
          runningTime: "1天1小时24分钟",
          order: "2",
          status: "finish"
        },
        {
          name: "确认变更结果",
          userFullName: "wcadmin",
          stateDisplay: "",
          oid: "OR:wt.workflow.definer.WfAssignedActivityTemplate:92332",
          state: "",
          runningTime: "",
          order: "4",
           status: "finish"
        },
        {
          name: "测试测试",
          userFullName: "wcadmin",
          stateDisplay: "",
          oid: "",
          state: "",
          runningTime: "",
          order: "",
          status: "process"
        },
        {
          name: "结束",
          userFullName: "",
          stateDisplay: "",
          oid: "",
          state: "",
          runningTime: "",
          order: "5",
          status: "wait"
        },
      ]
    }, // 步骤数据
    tableArr: {
      type: Array,
      default: () => [
        {
          workCompletedBy: "wcadmin",
          workComments: "",
          workCompletedDate: "2021-01-26 02:29:56",
          workName: "质量代表审核QIS异常信息",
          workVote: "重新校验",
        },
        {
          workCompletedBy: "wcadmin",
          workComments: "",
          workCompletedDate: "2021-01-26 02:27:51",
          workName: "提交交付物",
          workVote: "通过",
        },
        {
          workCompletedBy: "",
          workComments: "",
          workCompletedDate: "",
          workName: "PMO复查",
          workVote: "",
        },
        {
          workCompletedBy: "wcadmin",
          workComments: "",
          workCompletedDate: "2021-01-26 02:28:12",
          workName: "初物清单提报",
          workVote: "完成",
        },
      ]
    }, // 表格数据
    radioArr: {
      type: Array,
      default: () => [
        // {
        //   routing: "重新提交",
        //   lable: "重新提交"
        // },
        // {
        //   routing: "驳回",
        //   lable: "驳回"
        // }
      ]
    }, // 单选框数据
    isUser: {
      type: [Boolean,String],
      default: false
    },
    pageType: { // 从哪儿过来
      type: String,
      default: ''
    }
  },
  data() {
    return {
      /**起草人身份参数 */
      drafterVisible: false,
      
      radioInfo: '', // 选中单选后返回的数据
      selectArr: [
        // 下拉框数据
        {issue: "同意"},
        {issue: "不同意"},
      ],
      textAreaValue: "", // 文本框数据
      submitBtn: true,
      newStepArr:[],
    };
  },
  computed: {
    nowDataStatus() { // 当前数据状态
      return JSON.parse(sessionStorage.getItem('doneListInfo'))
    },
  },
  watch:{
    stepArr(val){
      this.newStepArr = val.filter((e)=>{
        return e.userFullName !=='';
      })
    }
  },
  mounted() {},
  methods: {
    radioChange(val) {
      this.radioInfo = val
    },
    // 点击弹框确认过后，添加内容到下拉框
    modelValue(val) {
      this.selectArr.push({issue: val});
    },
    // 点击下拉框事件
    selectChange(val) {
      this.textAreaValue = val;
    },
    //单选框默认第一个框有值
    defaultRadio(val){
      this.radioInfo = val
    },
    //提交流程处理
    onCompleteWorkItem() {
      // console.log(this.radioInfo);return;
      // alert("提交-" + this.radioInfo + '-' + this.$refs.describeTask.textAreaValueInput);
      this.$emit('submitProcessPeople', this.radioInfo.replace(/^\s+|\+$/g, ""), this.$refs.describeTask.textAreaValueInput, this.$refs.describeTask.inputPeopleId)
    },
    /**起草人身份 */
    drafterBtn() {
      this.drafterVisible = true
    },
    drafterClose() {
      this.drafterVisible = false
    },
    drafterConfirm() {
      this.drafterVisible = false
      this.$emit('drafterConfirm')
    }
  },
};
</script>
<style lang="less" scoped>
.commonProcess {
  .topBtn {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    .editUser{
      padding: 0 15px;
      font-size: 12px;
      height: 28px;
    }
  }
  .title {
    h1 {
      font-size: 16px;
      height: 40px;
      border-bottom: 1px solid #dddddd;
      display: flex;
      align-items: center;
      color: #333333;
      font-weight: 500;
    }
  }
  .stepBox {
    padding: 24px 0;
  }
  .bottomBox {
    margin-top: 20px;
  }
}
</style>